<template>
  <div v-loading="loading" class="app-container">
    <div style="color: red; text-align: center">
      <!-- *注意默认查询的是全部的统计数据，如果要查询其它的，请选择范围查询 -->
    </div>
    <br />
    <!-- 查询条件开始 -->
    <el-card class="cardmargin">
      <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
      >
        <el-form-item label="选择日期">
          <el-date-picker
              v-model="queryParams.dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholde="开始日期"
              end-placeholde="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
          >搜索</el-button
          >
          <el-button
              type="primary"
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
          >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 查询条件结果 -->
    <el-card class="cardmargin">
      合计收入:￥<span>{{ totalIncome - backIncome }}</span>
    </el-card>
    <el-card class="cardmargin">
      收支概况:
      <span class="spancls">总收入￥{{ totalIncome }}</span>
      <span class="spancls spanred">总退费￥{{ backIncome }}</span>
    </el-card>
    <el-card class="cardmargin">
      收入渠道:
      <span class="spancls">现金支付￥{{ cashIncome }}</span>
      <span class="spancls">支付宝支付￥{{ alipayIncome }}</span>
      <span class="spancls">微信支付￥{{ wecharIncome }}</span>
      <span class="spancls spanred">现金退费￥{{ cashRefund }}</span>
      <span class="spancls spanred">支付宝退费￥{{ alipayRefund }}</span>
      <span class="spancls spanred">微信退费￥{{ wecharRefund }}</span>
    </el-card>
    <!-- 收支概况统计表 -->
    <div class="chart">
      <div class="statistics" id="total"></div>
      <div class="statistics" id="income"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 遮罩
      loading: false,
      // 查询参数
      queryParams: {
        dateRange: undefined,
      },
      totalIncome: 0,
      //总退费
      backIncome: 0,
      //现金支付
      cashIncome: 0,
      //支付宝支付
      alipayIncome: 0,
      //现金退费
      cashRefund: 0,
      //支付宝退费
      alipayRefund: 0,
      //微信支付
      wecharIncome:0,
      //微信退费
      wecharRefund:0,

    };
  },
//初始化加载
  created() {
    this.loadData();
  },
//方法;
  methods: {
    loadData() {
      // 加载数据--初始化
      this.totalIncome= 0,
          //总退费
      this.backIncome=0,
          //现金支付
      this.cashIncome=0,
          //支付宝支付
      this.alipayIncome=0,
          //现金退费
      this.cashRefund=0,
          //支付宝退费
      this.alipayRefund=0,
          //微信支付
      this. wecharIncome=0,
          //微信退费
      this.wecharRefund=0,

     // console.log(this.queryParams)
      // 加载数据--总收入+退费
        this.$http.post("/orderChargeInfo/statistics/revenue/totalIncome", this.queryParams).then(res=>{
          console.log(res.data.data.data);
          if(res.data.code===200){
            res.data.data.data.forEach(item=>{
              this.totalIncome+=item.totalIncome;
              this.backIncome+=item.backIncome;
              if (item.payType==='0'){
                this.cashIncome+=item.totalIncome;
              }else if (item.payType==='1'){
                this.alipayIncome+=item.totalIncome;
              }else if (item.payType==='2'){
                this.wecharIncome+=item.totalIncome;
              }
              if (item.backType==='0'){
                this.cashRefund+=item.backIncome;
              }else if (item.backType==='1'){
                this.alipayRefund+=item.backIncome;
              }else if (item.backType==='2'){
                this.wecharRefund+=item.backIncome;
              }
            })
          }
          var myChart = echarts.init(document.getElementById("total"));
          // 收入概况统计
          let option = {
            title: {
              text: "收支概况",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "收支概况",
                type: "pie",
                radius: "50%",
                data: [
                  { value: this.totalIncome, name: "总收入" },
                  { value: this.backIncome, name: "总退费" },
                ],

                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          var myChart1 = echarts.init(document.getElementById("income"));
          //收入渠道统计
          let option1 = {
            title: {
              text: "收入渠道",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "收入渠道",
                type: "pie",
                radius: "50%",
                data: [
                  { value: this.cashIncome, name: "现金支付" },
                    { value: this.alipayIncome, name: "支付宝支付" },
                    { value: this.wecharIncome, name: "微信支付" },
                    { value: this.cashRefund, name: "现金退费" },
                    { value: this.alipayRefund, name: "支付宝退费" },
                    { value: this.wecharRefund, name: "微信退费" },
                ]
              }
            ]
          }
          myChart1.setOption(option1);
        })
    },
//退费
    backIncome1(item){
      console.log(item)
      if (item.backType==='0'){
        this.cashRefund+=item.backIncome;
      }else if (item.backType==='1'){
        this.alipayRefund+=item.backIncome;
      }else if (item.backType==='2'){
        this.wecharRefund+=item.backIncome;
      }
    },

    // 条件查询
    handleQuery() {
      this.loadData();
    },
    // 重置查询条件
    resetQuery() {
      this.queryParams = {};
      this.loadData();
    },
  },
};
</script>
<style>
.chart {
  display: flex;
}
.statistics {
  width: 550px;
  height: 250px;
  margin: 30px 10px;

}
.cardmargin {
  margin-bottom: 3px;
}
.spancls {
  display: inline-block;
  margin-left: 80px;
}
.spanred {
  color: red;
}
</style>
